<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-11-12 18:42
  PageName：e_practice5_custom_button.html
  Function：实战案例 - 自定义按钮样式
  URL：http://localhost:8080/j_form/j7_practice/e_practice5_custom_button.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 自定义按钮样式</title>

    <script type="text/javascript" src="images/jquery1.4.js"></script>
    <script type="text/javascript">
        $(function () {
            $('label').click(function () {
                $('label').attr('class', '');
                $('label').addClass('radio1');
                $(this).addClass('radio2');
            })
        })
    </script>

    <style type="text/css">
        body {
            font-family: "黑体";
            font-size: 16px;
        }

        form {
            position: relative;
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        p {
            width: 200px;
            float: left;
            text-align: left;
            margin: 0;
            padding: 0;
            margin: 10px 0px;
        }

        input {
            position: absolute;
            left: -999em;
        }

        .radio1, .radio2 {
            margin: 0px;
            padding-left: 40px;
            color: #000;
            line-height: 34px;
            height: 34px;
            background: url(images/4.jpg) no-repeat left top;
            cursor: pointer;
            display: block;
        }

        .radio2 {
            background: url(images/3.jpg) no-repeat left top;
        }
    </style>
</head>

<body>
<form>
    <h3>请选择您最喜欢的浏览器</h3>
    <p>
        <input type="radio" checked="" id="radio0" value="radio" name="group">
        <label for="radio0" class="radio1">Internet Explorer</label>
    </p>

    <p>
        <input type="radio" checked="" id="radio1" value="radio" name="group">
        <label for="radio1" class="radio1">Maxthon</label>
    </p>

    <p>
        <input type="radio" checked="" id="radio2" value="radio" name="group">
        <label for="radio2" class="radio2">Mozilla Firefox</label>
    </p>

    <p>
        <input type="radio" checked="" id="radio3" value="radio" name="group">
        <label for="radio3" class="radio1">谷歌浏览器</label>
    </p>

    <p>
        <input type="radio" checked="checked" id="radio4" value="radio" name="group">
        <label for="radio4" class="radio1">Opera</label>
    </p>

    <p>
        <input type="radio" checked="" id="radio5" value="radio" name="group">
        <label for="radio5" class="radio1">世界之窗</label>
    </p>

    <p>
        <input type="radio" checked="" id="radio6" value="radio" name="group">
        <label for="radio6" class="radio1">搜狗浏览器</label>
    </p>
</form>
</body>
</html>